<template>
  <el-header class="navbar">
    <div class="nav-container">
      <div class="items">
        <router-link to="/" tag="el-menu-item" class="item">首页</router-link>
        <router-link to="/products" tag="el-menu-item" class="item">产品列表</router-link>
        <router-link to="/cart" tag="el-menu-item" class="item">购物车</router-link>
        <router-link to="/orders" tag="el-menu-item" class="item">订单列表</router-link>
      </div>
    </div>
  </el-header>
</template>

<script>
export default {
  name: 'Navbar'
};
</script>

<style>
.nav-container {
  width: 240px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(4, 45, 87);
  border-right: 1px solid #d3dce6;
  padding-top: 30px;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 增加子项间距，更美观 */
}

.item {
  font-size: 16px;
  color: white;
  padding: 12px 20px;
  text-align: left;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s, transform 0.2s; /* 添加平滑的过渡效果 */
}

.item:hover {
  background-color: #e6f7ff; /* 鼠标悬停时突出显示 */
  transform: translateX(5px); /* 悬停时轻微右移以增加互动感 */
}

.item:active {
  background-color: #bae7ff; /* 点击时改变背景颜色 */
}

.item.router-link-active {
  font-weight: bold;
  color: #409eff;
}
</style>
